﻿$(function (){


	/**
	 * 添加一个自定义的audio对象
	 * @type {HTMLAudioElement}
	 * @private
	 */
	const _audio = new customPlayBox({
		ele:'#playBox',
		controlColor:'#FFC108',
		sliderColor:'#E6E6E6',
		cacheColor:'#D1D1D1',
		textColor:'#fff',
		playIconClass: 'jc-play-circle-btn',
		pauseIconClass: 'jc-pause-circle-btn',
		onendedCall:function (){
			//当前音频播放完成后要处理的事件
			if(_audio.Playback_currSetting==2){
				autoSlideNext()
			}else if(_audio.Playback_currSetting==1){
				_audio.play()
			}

		}
	})

	/**
	 * 设置当前播放的歌谱显示方式
	 * @type {string}
	 */
	let CURRTERTYPE = 'gc'
	/**
	 * 当前是否全屏状态
	 * @type {boolean}
	 */
	let ISFULLSCREEN = false
	$(".bi-fullscreen").show()
	$(".bi-fullscreen-exit").hide()
	/**
	 * 初始化音频的四种播放状态
	 * 1代表单曲循环
	 * 2代表列表循环播放
	 * @type {*[1,2,3,4]}
	 */
	_audio.Playback_settings = [1,2,3,4]

	/**
	 * 单曲播放ICON
	 * @type {string}
	 */
	let DANQU_PLAY_ICON = 'data:image/svg+xml;utf8,%3Csvg%20class%3D%22icon%22%20style%3D%22width%3A%201em%3Bheight%3A%201em%3Bvertical-align%3A%20middle%3Bfill%3A%20currentColor%3Boverflow%3A%20hidden%3B%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M938.61%20570.44c-10.7%200-19.82%208.18-20.52%2018.86C908.35%20740%20782.63%20859.64%20629.5%20859.64H402.48c-156.61%200-290.18-121.55-296.09-278.05-6.22-164.53%20125.82-300.36%20288.99-300.36H533.1v-0.01h165.04v100.5c0%2013.14%2014.36%2021.23%2025.6%2014.43L924%20275c10.85-6.56%2010.85-22.3%200-28.86L723.74%20124.98c-11.24-6.8-25.6%201.29-25.6%2014.43v100.5H489.79v0.01h-86.96c-185.3%200-341.42%20151.64-337.9%20336.91%203.41%20179.59%20150.05%20324.13%20330.46%20324.13H629.5c175.07%200%20318.35-136.11%20329.78-308.29%200.8-11.99-8.65-22.23-20.67-22.23z%22%20fill%3D%22%23FFFFFF%22%20%2F%3E%3Cpath%20d%3D%22M550%20708V456.66h-25.92l-67.45%2054.67%2017.75%2021.65L519.47%20495h0.71v213z%22%20fill%3D%22%23FFFFFF%22%20%2F%3E%3C%2Fsvg%3E'

	/**
	 * 循环播放ICON
	 * @type {string}
	 */
	let XUANHUAN_PLAY_ICON = 'data:image/svg+xml;utf8,%3Csvg%20class%3D%22icon%22%20style%3D%22width%3A%201.2900390625em%3Bheight%3A%201em%3Bvertical-align%3A%20middle%3Bfill%3A%20currentColor%3Boverflow%3A%20hidden%3B%22%20viewBox%3D%220%200%201321%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M599.587816%20179.318443l-126.70884-126.70884A29.893509%2029.893509%200%201%201%20515.027172%2010.461407l126.70884%20126.70884a29.893509%2029.893509%200%200%201-42.148196%2042.148196z%22%20fill%3D%22%23FFFFFF%22%20%2F%3E%3Cpath%20d%3D%22M511.757053%20311.444449l126.70884-126.70884a29.893509%2029.893509%200%201%200-42.115164-42.148196l-126.70884%20126.70884a29.893509%2029.893509%200%200%200%2042.115164%2042.148196zM511.195518%20370.438711h418.41003a29.893509%2029.893509%200%201%201%200%2059.787017H511.195518a29.893509%2029.893509%200%201%201%200-59.787017zM511.195518%20579.660241h418.41003a29.893509%2029.893509%200%201%201%200%2059.787018H511.195518a29.893509%2029.893509%200%201%201%200-59.787018zM511.195518%20758.955232h418.41003a29.893509%2029.893509%200%201%201%200%2059.787017H511.195518a29.893509%2029.893509%200%201%201%200-59.787017zM391.654514%20370.438711a29.893509%2029.893509%200%201%201%200%2059.787017%2029.893509%2029.893509%200%200%201%200-59.787017zM391.654514%20579.660241a29.893509%2029.893509%200%201%201%200%2059.787018%2029.893509%2029.893509%200%200%201%200-59.787018zM391.654514%20758.955232a29.893509%2029.893509%200%201%201%200%2059.787017%2029.893509%2029.893509%200%200%201%200-59.787017z%22%20fill%3D%22%23FFFFFF%22%20%2F%3E%3Cpath%20d%3D%22M588.4562%20132.149459a33.031502%2033.031502%200%200%201%203.831654%2065.831782L588.4562%20198.212462H445.925271C236.142204%20198.212462%2066.063003%20368.291663%2066.063003%20578.074729c0%20206.579011%20164.893256%20374.610259%20370.217069%20379.730142L445.925271%20957.936997h429.40952C1085.117857%20957.936997%201255.197058%20787.857796%201255.197058%20578.074729c0-182.003573-128.954982-337.44982-305.277137-372.562306A381.844158%20381.844158%200%200%200%20875.334791%20198.212462a33.031502%2033.031502%200%200%201%200-66.063003c29.629257%200%2058.862136%202.906772%2087.500447%208.58819C1169.87669%20181.960963%201321.260061%20364.426977%201321.260061%20578.074729c0%20242.847599-194.126135%20440.375978-435.685505%20445.826176L875.334791%201024h-429.40952C199.642395%201024%200%20824.357605%200%20578.074729%200%20335.22713%20194.126135%20137.698751%20435.685505%20132.248553L445.925271%20132.149459h142.530929z%22%20fill%3D%22%23FFFFFF%22%20%2F%3E%3C%2Fsvg%3E'

	/**
	 * 设置当前播放状态为 单曲循环
	 * @type {number}
	 */
	_audio.Playback_currSetting = 1
	$('#playSetting').attr('src',DANQU_PLAY_ICON)

	/**
	 * 设置当前播放的音频列表
	 * @type {string}
	 */
	_audio.Audio_list = []
	//获取ids
	let d = getcanshu().d

	//获取标题
	let t = getcanshu().t

	document.title = decodeURI(t)

	//音频请求地址
	// const zmUrl = "http://od.qumei.com/sgb/dmt/ad/"
	const zmUrl = "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/ad"
	//少儿赞美PPT图片请求地址
	// const ptHostUrl ="http://od.qumei.com/sgb/dmt/srzm_gz_img"
	const ptHostUrl ="https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/srzm_gz_img"
	//获取分享页的描述
	let bz = getcanshu().bz

	const layer = layui.layer

	try{
		d = d.split(',')
	}catch (e){
		layer.msg("没有可播放的播单")
		return
	}
	//图片报错后的提示图片
	const TEMPIMGURL = './img/temp.png'

	//微信验证登录并设置分享
	wxSDK()
	.then(res=>{
		SDKyanzheng(res).then(res=>{
				let title = document.title
				let url = location.href
				let imgUrl=$('#zhandianIcon').attr('href')
				let desc= decodeURI(bz)
				fenxiang(title,url,imgUrl,desc)
		})


	}).catch(error=>{
		console.log(error)
	})



	let dateobj1

	let mySwiper = new Swiper('.swiper-container', {
		lazy:{
			loadPrevNext: true,
		} ,
		width: document.body.offsetWidth,
		autoHeight: false,
		watchOverflow: true,
		resizeObserver: true,
		observer:true,
		// 窗口缩放时设置width
		on: {
			resize: function(){

				this.params.width = $("#mainD").width()
				this.update();
			},
			slideNextTransitionEnd: function(swiper){

				let Aindex = swiper.activeIndex

				initAudio(dateobj1['data'][Aindex]['dmtUrl']['adUrl'])

			},
			slidePrevTransitionEnd:function (swiper){
				let Aindex = swiper.activeIndex
				initAudio(dateobj1['data'][Aindex]['dmtUrl']['adUrl'])

			},
			click: function(swiper,event){

			},
			init:function (swiper){
				this.params.width = $("#mainD").width()
			},
		},
		pagination: {
			el: '.swiper-pagination',
			type: 'fraction',
		},

	});

	init()

	async function init(){

		await  anonymouslogin();

		dateobj1 = await getZmItemWhereId(d)

		let newD = []

		//排序
		d.filter(n=>{
			for(let i = 0 ; i < dateobj1.data.length ; i++){
				if(dateobj1.data[i]['_id'] == n ){
					newD.push( dateobj1.data[i])
				}
			}
		})

		dateobj1.data = newD


		let $html = ""

		for(let i = 0 ; i < dateobj1.data.length ; i++){

			console.log(dateobj1.data[i]);

			let bb = jm(dateobj1['data'][i]['xuhao']+dateobj1['data'][i]['mulu'])

			//将要播放的音频链接注入到列表中
			_audio.Audio_list.push(`${zmUrl}${bb}.mp3`)

			if(dateobj1['data'][i]['shijiIndex'] == 3 && dateobj1['data'][i]['isopern'] == 0){

				let lyric = dateobj1['data'][i]['lyric']

				let lyricA = lyric.split("\n")

				$htmlLyric = `<span style="font-size:26px;font-weight:bolder;">${dateobj1['data'][i]['mulu']}</span><br>`

				for(let i = 0 ; i < lyricA.length ; i++){

					$htmlLyric+=`${lyricA[i]}<br>`
				}

				$html += `<div class="swiper-slide" data-type="gc">
							<p style="line-height: 40px;text-align: center;font-size:18px;">${$htmlLyric}</p>
						  </div>`

				// if(i<=0)_audio.resetSrc(`${zmUrl}/${bb}.mp3`)
				if(i<=0)_audio.resetSrc(dateobj1.data[i]['dmtUrl']['adUrl'])

			}
			else
			{
				if(i<=0){
					_audio.resetSrc(dateobj1.data[i]['dmtUrl']['adUrl'])
					// _audio.resetSrc(`${zmUrl}/${bb}.mp3`)
					let $htmlOne
					if(dateobj1['data'][i]['shijiIndex'] == 4){
						 $htmlOne = `<div class="swiper-slide overflow-auto" data-type="gp">
						<img src="${TEMPIMGURL}" class="swiper-lazy" tabindex="0" alt="这是${dateobj1['data'][i]['mulu']}的歌谱图片">
					  </div>`
					}else{
						 $htmlOne = `<div class="swiper-slide overflow-auto" data-type="gp">
						<img src="${dateobj1.data[i]['dmtUrl']['gepuUrl']}" class="swiper-lazy" tabindex="0" alt="这是${dateobj1['data'][i]['mulu']}的歌谱图片">
					  </div>`
					}

					$(".swiper-wrapper").append($htmlOne)

					imgLoad(0)

				}else{

					if(dateobj1['data'][i]['shijiIndex'] == 4){
						$html += `<div class="swiper-slide overflow-auto" data-type="gp">
						<img  data-src="${TEMPIMGURL}" class="swiper-lazy" tabindex="0" alt="这是${dateobj1['data'][i]['mulu']}的歌谱图片">
						 <div class="swiper-lazy-preloader swiper-lazy-preloader-black"></div>
					  </div>`
					}else{
						$html += `<div class="swiper-slide overflow-auto" data-type="gp">
						<img  data-src="${dateobj1.data[i]['dmtUrl']['gepuUrl']}?sign=41221c40e0685219e8d158d51c8194cc&t=1623893123" class="swiper-lazy" tabindex="0" alt="这是${dateobj1['data'][i]['mulu']}的歌谱图片">
						 <div class="swiper-lazy-preloader swiper-lazy-preloader-black"></div>
					  </div>`
					}
				}
			}
		}
		$(".swiper-wrapper").append($html)
		mySwiper.updateSlides()

	}


	/**
	 * 下载音频功能
	 */

	$('#downMp3btn').click(()=>{
		let url = _audio.src;
		let title = '237、医治、顶峰';
		title = dateobj1.data[mySwiper.activeIndex].mulu
		var xhr = new XMLHttpRequest();
		xhr.open('GET', url, true);//get请求，请求地址，是否异步
		xhr.responseType = "blob";  // 返回类型blob
		xhr.onload = function () {// 请求完成处理函数
			if (this.status === 200) {
				var blob = this.response;// 获取返回值
				var a = document.createElement('a');
				a.download = title + '.mp3';
				a.href=window.URL.createObjectURL(blob);
				a.click();
			}
		};
		// 发送ajax请求
		xhr.send();
	})
	/**
	 * 切换播放状态功能
	 */
	$('#playSetting').click(function (){

		_audio.Playback_currSetting = _audio.Playback_currSetting%2+1

		switch (_audio.Playback_currSetting){
			case 1:
				layer.msg('单曲循环播放')
				this.src = DANQU_PLAY_ICON
				$(this).attr('aria-label','播放方式切换按钮，当前为单曲播放')
				break;
			case 2:
				layer.msg('列表循环播放')
				$(this).attr('aria-label','播放方式切换按钮，当前为列表循环播放')
				this.src = XUANHUAN_PLAY_ICON
				break;
		}

	})

	$('#playSetting').keyup(function (e){
		if(e.keyCode == 13){
			$('#playSetting').click()
		}
	})


	//监听显示的歌谱类型切换事件

	$(".showGeci").click(function (e) {

		//当前的元素
		let currtenEl = $(mySwiper.slides[mySwiper.activeIndex])
		//当前的type
		CURRTERTYPE = currtenEl[0].dataset.type
		//点击的type
		let type = $(this).attr('data-type')
		//当前页的数据
		let data = dateobj1.data[mySwiper.activeIndex]
		if(type==CURRTERTYPE)return

		let index = layer.load(1, {shade: [0.1,'#fff'] //0.1透明度的白色背景
		});

		let mulu = data['xuhao']+data['mulu']
		let ptUrl =data.dmtUrl.pptUrl

		if (type == 'ppt') {

			currtenEl.children().remove()
			let pptImgEl = $(`<img src="${ptUrl}" class="swiper-lazy">`)
			currtenEl.append(pptImgEl)
			currtenEl.children()
			.load(function (){
				layer.close(index)
				$(currtenEl).attr('data-type','ppt')
				mySwiper.update()
			})
			.error(function (){

				if(CURRTERTYPE == 'gc'){

					createGcEl(data,currtenEl)

				}else if(CURRTERTYPE == 'gp'){

					currtenEl.children().remove()
					let bb = jm(data['xuhao']+data['mulu'])
					let pptImgEl = $(`<img src="${zmUrl}/${bb}.jpg" class="swiper-lazy">`)
					currtenEl.append(pptImgEl)

				}

				layer.msg('当前赞美暂时没有ppt图片')

				currtenEl.attr('data-type',CURRTERTYPE)

				layer.close(index)

				mySwiper.update()
			})



		}else if (type == 'gc') {


			if(data['lyric']!==''){
				currtenEl.children().remove()
				createGcEl(data,currtenEl)
				mySwiper.update()
			}else{
				layer.msg('当前赞美没有歌词')
			}

			layer.close(index)

		}else if (type == 'gp') {

			currtenEl.children().remove()
			let bb = jm(data['xuhao']+data['mulu'])
			let pptImgEl = $(`<img src="${data.dmtUrl.gepuUrl}" class="swiper-lazy">`)
			currtenEl.append(pptImgEl)

			currtenEl.children()
			.load(function (){
				layer.close(index)
				$(currtenEl).attr('data-type','gp')
				mySwiper.update()
			})
			.error(function (){


				if(CURRTERTYPE == 'gc'){

					createGcEl(data,currtenEl)

				}else if(CURRTERTYPE == 'ppt'){

					currtenEl.children().remove()
					let pptImgEl = $(`<img src="${ptUrl}" class="swiper-lazy">`)
					currtenEl.append(pptImgEl)
				}

				layer.msg('当前赞美暂时没有歌谱')

				currtenEl.attr('data-type',CURRTERTYPE)

				layer.close(index)

				mySwiper.update()
			})
		}

	})

	//初始化音频函数
	function initAudio(aduioUrl){

		_audio.resetSrc(aduioUrl)
		if(_audio.Playback_currSetting==2){
			setTimeout(()=>{
				_audio.resetSrc(aduioUrl,1)
			},600)
		}

	}

	function closeLoading(index){
		layer.close(index)
	}

	//图片加载函数

	function imgLoad(Aindex){

		var index = layer.load(1, {
			shade: [0.1,'#fff'] //0.1透明度的白色背景
		});

		let imgs = document.querySelectorAll('.swiper-slide img')
		//complete 判断图片是否加载完成
		if(!imgs[Aindex].complete){
			$(imgs[Aindex]).unbind('load').on('load',function (){
				layer.close(index)
			}).on('error',function (){
				layer.close(index)
				console.log(this)
				this.src = TEMPIMGURL
			})
		}else{
			layer.close(index)
		}
	}

	//全屏和退出全屏方法
	function fullScreen (){
		document.documentElement.requestFullscreen()
	}

	function exitFullScreen(){
		document.exitFullscreen()
	}


	$('#fullSc').click(()=>{

		if(!ISFULLSCREEN){
			fullScreen()
			$('#fullSc').text('退出全屏')
		}else{
			exitFullScreen()
			$('#fullSc').text('全屏')
		}
		ISFULLSCREEN = !ISFULLSCREEN

	})

	if(!localStorage.getItem('playType') == 1){
		layer.tips('点击我可切换播放状态', '#playSetting',{tips: 1,time:2000,success(){
				 localStorage.setItem('playType',1)
			}})
	}


	function createGcEl(data,currtenEl){

		let lyric = data['lyric']

		let lyricA = lyric.split("\n")

		let $htmlLyric = `<span style="font-size:26px;font-weight:bolder;">${data['mulu']}</span><br>`

		for(let i = 0 ; i < lyricA.length ; i++){

			$htmlLyric+=`${lyricA[i]}<br>`
		}

		$html = $(`<p style="line-height: 40px;text-align: center;font-size:18px;">${$htmlLyric}</p>`)

		currtenEl.children().remove()
		currtenEl.append($html)
		currtenEl.attr('data-type','gc')
	}



	/**
	 * 当播放状态为列表循环时将下一首播放要做的动作封装到了里面
	 */
	function autoSlideNext(){
		let slidesLen = mySwiper.slides.length - 1
		if(mySwiper.activeIndex >= slidesLen){
			mySwiper.slideTo(0)
			return
		}
		mySwiper.slideNext();
	}




})
